<template>
  <div>
    <!-- from表单 -->
    <el-dialog
      title="修改信息"
      :visible.sync="show"
      width="30rem"
      :before-close="closeDialog"
    >
      <el-form
        ref="form"
        label-position="left"
        label-width="5rem"
        :model="routerInfo"
      >
        <el-form-item label="标题等级" required="">
          {{ routerInfo.level }}级
        </el-form-item>
        <el-form-item label="标题名称" required="">
          <el-input
            v-model="routerInfo.name"
            clearable
            maxlength="10"
            show-word-limit
            style="width:15rem"
          />
        </el-form-item>
        <el-form-item v-if="routerInfo.level !== '1'" label="当前状态" required="">
          <el-select v-model="routerInfo.status" placeholder="请选择" style="width:15rem">
            <el-option
              v-for="item in statusType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="routerInfo.level !== '1'" label="标题内容" required="">
          <el-input
            v-model="routerInfo.listInfo"
            type="textarea"
            style="width:15rem"
            autosize
            placeholder="请输入标题"
          />
        </el-form-item>
        <el-form-item v-if="routerInfo.level !== '1'" label="评分类型" required="">
          <el-select v-model="routerInfo.listType" placeholder="请选择" style="width:15rem" @change="typechange">
            <el-option
              v-for="item in listTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="routerInfo.listType === 2 ||routerInfo.listType === 3" label="评分机制" required="">
          <el-select v-model="routerInfo.scoreType" placeholder="请选择" style="width:15rem">
            <el-option
              v-for="item in scoreType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <template v-if="routerInfo.listType !== 5">
          <el-form-item label="基础分" required="">
            <el-input
              v-model="routerInfo.baseScore"
              style="width:15rem"
              placeholder="请输入基础分"
              oninput="value=value.replace(/^\.+|[^\d.-]/g,'')"
              maxlength="5"
              clearable
            />
          </el-form-item>
          <el-form-item label="最高分" required="">
            <el-input
              v-model="routerInfo.maxScore"
              style="width:15rem"
              placeholder="请输入最高分"
              oninput="value=value.replace(/^\.+|[^\d.-]/g,'')"
              maxlength="5"
              clearable
            />
          </el-form-item>
          <el-form-item label="最低分" required="">
            <el-input
              v-model="routerInfo.minScore"
              style="width:15rem"
              placeholder="请输入最低分"
              oninput="value=value.replace(/^\.+|[^\d.-]/g,'')"
              maxlength="5"
              clearable
            />
          </el-form-item>
        </template>
        <!-- <el-form-item label="当前图标" required="">
          <el-image
            style="width:2rem; height: 2rem"
            :src="routerInfo.icon"
            fit="fill"
          />
        </el-form-item> -->
        <el-form-item label="图标" required="">
          <e-icon-picker v-model="routerInfo.icon" style="margin-left:4rem;width:15rem" :options="options" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">取 消</el-button>
        <el-button type="primary" @click="sendDialog()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { EIconPicker } from 'e-icon-picker'
import 'e-icon-picker/lib/symbol.js' // 基本彩色图标库
import 'e-icon-picker/lib/index.css' // 基本样式，包含基本图标
import 'font-awesome/css/font-awesome.min.css' // font-awesome 图标库
import 'element-ui/lib/theme-chalk/icon.css' // element-ui 图标库
import { deepClone } from '../../utils/deepClone.js'
import { updateFlist } from '../../api/flist.js'
import { updateSlist } from '../../api/slist.js'
import { updateTlist } from '../../api/tlist.js'
export default {
  name: 'App',
  components: { EIconPicker },
  props: {
  },
  data() {
    return {
      icon: '',
      options: {
        FontAwesome: true,
        ElementUI: true,
        eIcon: true, // 自带的图标，来自阿里妈妈
        eIconSymbol: true, // 是否开启彩色图标
        addIconList: [],
        removeIconList: []
      },
      // 后台获取数据
      routerInfo: {},
      // 页面存储数据
      show: false,
      updatetype: 0, // 0:未更新 1:已更新
      listTypes: [
        {
          label: '考核制',
          value: 1
        },
        {
          label: '评分制',
          value: 2
        },
        {
          label: '审核评分制',
          value: 3
        },
        {
          label: '一票否决制',
          value: 5
        }
      ], // 评分类型选择
      statusType: [
        {
          label: '上架',
          value: 1
        },
        {
          label: '未上架',
          value: 2
        }
      ],
      scoreType: [
        {
          label: '加分制',
          value: 1
        },
        {
          label: '扣分制',
          value: 2
        },
        {
          label: '有加有扣制',
          value: 3
        }
      ]

    }
  },
  created() {
    // dialog信息初始化
    this.createDialogStatus()
  },
  methods: {
    // dialog信息初始化
    createDialogStatus() {
      this.show = false
    },
    // 展示dialog
    showDialog(data) {
      this.show = true
      //  获取用户信息
      const resRouter1 = JSON.parse(JSON.stringify(data).replace(/flistId/g, 'id'))
      const resRouter2 = JSON.parse(JSON.stringify(resRouter1).replace(/slistId/g, 'id'))
      const resRouter3 = JSON.parse(JSON.stringify(resRouter2).replace(/tlistId/g, 'id'))
      const resRouter4 = JSON.parse(JSON.stringify(resRouter3).replace(/flistName/g, 'name'))
      const resRouter5 = JSON.parse(JSON.stringify(resRouter4).replace(/slistName/g, 'name'))
      const resRouter6 = JSON.parse(JSON.stringify(resRouter5).replace(/tlistName/g, 'name'))
      const resRouter7 = JSON.parse(JSON.stringify(resRouter6).replace(/flistPath/g, 'path'))
      const resRouter8 = JSON.parse(JSON.stringify(resRouter7).replace(/slistPath/g, 'path'))
      const resRouter9 = JSON.parse(JSON.stringify(resRouter8).replace(/tlistPath/g, 'path'))
      const resRouter10 = JSON.parse(JSON.stringify(resRouter9).replace(/flistIconWeb/g, 'icon'))
      const resRouter11 = JSON.parse(JSON.stringify(resRouter10).replace(/slistIconWeb/g, 'icon'))
      const resRouter12 = JSON.parse(JSON.stringify(resRouter11).replace(/flistStatus/g, 'status'))
      const resRouter13 = JSON.parse(JSON.stringify(resRouter12).replace(/slistStatus/g, 'status'))
      const resRouter14 = JSON.parse(JSON.stringify(resRouter13).replace(/tlistStatus/g, 'status'))
      const resRouter15 = JSON.parse(JSON.stringify(resRouter14).replace(/flistPostTime/g, 'time'))
      const resRouter16 = JSON.parse(JSON.stringify(resRouter15).replace(/slistPostTime/g, 'time'))
      const resRouter17 = JSON.parse(JSON.stringify(resRouter16).replace(/tlistPostTime/g, 'time'))
      const resRouter18 = JSON.parse(JSON.stringify(resRouter17).replace(/tlistIconWeb/g, 'icon'))
      const resRouter19 = JSON.parse(JSON.stringify(resRouter18).replace(/slistUserType/g, 'type'))
      const resRouter20 = JSON.parse(JSON.stringify(resRouter19).replace(/tlistUserType/g, 'type'))
      const resRouter21 = JSON.parse(JSON.stringify(resRouter20).replace(/flistBaseScore/g, 'baseScore'))
      const resRouter22 = JSON.parse(JSON.stringify(resRouter21).replace(/slistBaseScore/g, 'baseScore'))
      const resRouter23 = JSON.parse(JSON.stringify(resRouter22).replace(/tlistBaseScore/g, 'baseScore'))
      const resRouter24 = JSON.parse(JSON.stringify(resRouter23).replace(/flistMaxScore/g, 'maxScore'))
      const resRouter25 = JSON.parse(JSON.stringify(resRouter24).replace(/slistMaxScore/g, 'maxScore'))
      const resRouter26 = JSON.parse(JSON.stringify(resRouter25).replace(/tlistMaxScore/g, 'maxScore'))
      const resRouter27 = JSON.parse(JSON.stringify(resRouter26).replace(/flistMinScore/g, 'minScore'))
      const resRouter28 = JSON.parse(JSON.stringify(resRouter27).replace(/slistMinScore/g, 'minScore'))
      const resRouter29 = JSON.parse(JSON.stringify(resRouter28).replace(/tlistMinScore/g, 'minScore'))
      const resRouter30 = JSON.parse(JSON.stringify(resRouter29).replace(/flistPostTime/g, 'postTime'))
      const resRouter31 = JSON.parse(JSON.stringify(resRouter30).replace(/slistPostTime/g, 'postTime'))
      const resRouter32 = JSON.parse(JSON.stringify(resRouter31).replace(/tlistPostTime/g, 'postTime'))
      const resRouter33 = JSON.parse(JSON.stringify(resRouter32).replace(/flistPosition/g, 'position'))
      const resRouter34 = JSON.parse(JSON.stringify(resRouter33).replace(/slistPosition/g, 'position'))
      const resRouter35 = JSON.parse(JSON.stringify(resRouter34).replace(/tlistPosition/g, 'position'))
      const resRouter36 = JSON.parse(JSON.stringify(resRouter35).replace(/slistScoreType/g, 'scoreType'))
      const resRouter37 = JSON.parse(JSON.stringify(resRouter36).replace(/tlistScoreType/g, 'scoreType'))
      const resRouter38 = JSON.parse(JSON.stringify(resRouter37).replace(/slistType/g, 'listType'))
      const oldRouter = JSON.parse(JSON.stringify(resRouter38).replace(/tlistType/g, 'listType'))
      this.routerInfo = deepClone(oldRouter)
    },
    // 关闭dialog
    closeDialog() {
      this.$confirm('是否确定取消', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.show = false
        this.routerInfo = {}
      }).catch(() => {})
    },
    // 提交dialog
    sendDialog() {
      var that = this
      var routerInfo = this.routerInfo
      if (routerInfo.name === '') {
        that.$message({
          message: '请填写标题名称',
          type: 'warning'
        })
      } else {
        // 根据等级判断
        if (routerInfo.level !== '1') {
          if (routerInfo.listInfo === '') {
            that.$message({
              message: '请填写标题内容',
              type: 'warning'
            })
          } else {
            // 判断评分类型
            if (routerInfo.listType === 5) {
              // 一票否决制
              routerInfo.baseScore = 0
              routerInfo.maxScore = 99999
              routerInfo.minScore = -99999
              routerInfo.scoreType = 1
              // 准备提交
              that.sendRouter(routerInfo)
            } else if (routerInfo.listType === 1) {
              routerInfo.scoreType = 1
              that.sendRouter(routerInfo)
            } else {
              if (routerInfo.baseScore === '') {
                that.$message({
                  message: '请填写基础分',
                  type: 'warning'
                })
              } else if (routerInfo.minScore === '') {
                that.$message({
                  message: '请填写最低分',
                  type: 'warning'
                })
              } else if (routerInfo.maxScore === '') {
                that.$message({
                  message: '请填写最高分',
                  type: 'warning'
                })
              } else {
                // 准备提交
                that.sendRouter(routerInfo)
              }
            }
          }
        } else {
          // 准备提交
          that.sendRouter(routerInfo)
        }
      }
    },

    // 提交路由信息
    sendRouter(routerInfo) {
      var that = this
      if (routerInfo.level === '1') {
        updateFlist(routerInfo).then(data => {
          if (data.msg === '操作成功') {
            that.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success'
            })
            that.routerInfo = {}
            this.$emit('reloadInfo', 0)
            that.show = false
          } else {
            that.$notify({
              title: '失败',
              message: '修改失败',
              type: 'error'
            })
            that.routerInfo = {}
            that.show = false
          }
        })
      } else if (routerInfo.level === '2') {
        updateSlist(routerInfo).then(data => {
          if (data.msg === '操作成功') {
            that.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success'
            })
            this.$emit('reloadInfo', 0)
            that.routerInfo = {}
            that.show = false
          } else {
            that.$notify({
              title: '失败',
              message: '修改失败',
              type: 'error'
            })
            that.routerInfo = {}
            that.show = false
          }
        })
      } else if (routerInfo.level === '3') {
        updateTlist(routerInfo).then(data => {
          if (data.msg === '操作成功') {
            that.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success'
            })
            this.$emit('reloadInfo', 0)
            that.routerInfo = {}
            that.show = false
          } else {
            that.$notify({
              title: '失败',
              message: '修改失败',
              type: 'error'
            })
            that.routerInfo = {}
            that.show = false
          }
        })
      }
    },
    // 改变评分类型后数据清空
    typechange() {
      var that = this
      that.$set(that.routerInfo, 'scoreType', '')
      that.$set(that.routerInfo, 'baseScore', '')
      that.$set(that.routerInfo, 'maxScore', '')
      that.$set(that.routerInfo, 'minScore', '')
      if (that.listType === 5) {
        that.$set(that.routerInfo, 'scoreType', 1)
        that.$set(that.routerInfo, 'baseScore', 0)
        that.$set(that.routerInfo, 'maxScore', 99999)
        that.$set(that.routerInfo, 'minScore', -99999)
      } else if (that.listType === 1) {
        that.$set(that.routerInfo, 'scoreType', 1)
      }
    }
  }
}
</script>
<style lang="scss">

</style>
